<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>分页显示数据</title>
    <link href="./CSS-2.css" rel="stylesheet">

</head>
<body>
<div id="app">
    <div>
        <table>
            <tr>
                <th colspan="6">
                    <h1>用户列表</h1>
                </th>
            </tr>
            <!-- 翻页 -->
            <tr>
                <td colspan="3"></td>
                <td>每页条数:<input type="text" v-model.number.lazy="rowsPerPage"/></td>
                <td>
                    <button @click="prePage()">上一页</button>
                </td>
                <td>
                    <button @click="nextPage()">下一页</button>
                </td>
            </tr>
        </table>
        <!-- 显示 -->
        <table class="tableClass1">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th colspan="2">操作</th>
            </tr>
            <!-- 分页 -->
            <tr v-for="(user1,index) in userList" v-if="index>=userIndex&&index<userIndex+rowsPerPage">
                <td v-text="user1.id"></td>
                <td v-text="user1.name"></td>
                <td v-text="user1.age"></td>
                <td v-text="user1.sex"></td>
                <td>
                    <button @click="" class="update">修改</button>
                </td>
                <td>
                    <button @click="" class="del">删除</button>
                </td>
            </tr>

        </table>

    </div>

</div>
<script src="../js/axios.js"></script>
<script src="../js/vue.js"></script>
<script>
    /* restFul风格 url都是/VueAxios/user/参数 */
    /* 公共url前缀 */
    axios.defaults.baseURL = `http://127.0.0.1:8090`
    const APP = new Vue({
        //不要忘记# .等符号
        el: '#app',
        data: {
            url: '/VueAxios/user',
            userList: [],
            /* 每页第一条数据的索引 */
            userIndex: 0,
            /* 每页显示数据的条数 */
            rowsPerPage: 5
        },
        methods: {
            async getUserList() {
                let {
                    data: value
                } = await axios.get(`${this.url}`)
                this.userList = value
            },
            prePage() {
                if (this.userIndex >= this.rowsPerPage) {
                    this.userIndex -= this.rowsPerPage
                } else {
                    this.userIndex = 0
                }
            },
            nextPage() {
                if (this.userIndex < this.userList.length - this.rowsPerPage) {
                    this.userIndex += this.rowsPerPage
                }
            }
        },
        mounted() {
            this.getUserList()
        }
    })
</script>
</body>
</html>
